<template>
	<view>
		<view class="page-body">
			<view class="page-section page-sectio">
				<map style="width: 100%; height:100vh;z-index: 1002;" :latitude="latitude" :longitude="longitude"
					:markers="covers" :scale="scale" @callouttap='callouttap'>
				</map>
					<!-- <map style="width: 100%; height:100vh;z-index: 1;" :latitude="latitude" :longitude="longitude"
					:markers="covers" :scale="scale" :show-compass="showCompass" :enable-overlooking="enableOverlooking"
					:enable-zoom="enableZoom" :enable-scroll="enableScroll" :enable-rotate="enableRotate"
					:enable-satellite="enableSatellite" :enable-traffic="enableTraffic" @callouttap="callouttap" >
				</map> -->
			</view>
		</view>
	</view>
</template>

<script>
	import point from "@/static/aidex/position.png";
	import {
		List
	} from "@icon-park/vue";
	export default {
		props: {
			list: Array,
		},
		data() {
			return {
				showCompass: true,
				enable3D: true,
				enableOverlooking: true,
				cenableZoom: true,
				enableScroll: true,
				enableRotate: true,
				enableSatellite: false,
				enableTraffic: false,
				title: 'map',
				latitude: 39.919752,
				enableZoom: 11,
				longitude: 116.396402,
				scale: 10.6, //缩放级别
				bottomData: false,
				covers: []
			}
		},
		created() {
			this.getMarkers()
		},
		watch: {
			list: {
				immediate: true,
				handler(newList) {
					if (newList && newList.length > 0) {
						this.getMarkers(newList);
					}
				},
			},
		},
		methods: {
			callouttap(e) {
				console.log('地图点击事件', e)
			},
			getMarkers() {
				this.covers = this.list.map(item => {
					return {
						latitude: parseFloat(item.coordinate.split(',')[1]),
						longitude: parseFloat(item.coordinate.split(',')[0]),
						iconPath: point,
						width: "20",
						height: "20",
						joinCluster: true,
						callout: {
							id: item.id,
							content: item.name,
							color: '#ffffff',
							fontSize: 14,
							borderRadius: 15,
							borderWidth: '10',
							bgColor: '#e51860',
							display: 'ALWAYS',
						}
					};
				});

			}
		}
	}
</script>